import React from 'react';
import { useState } from 'react';
import { useRef } from 'react';

const App = () => {
  const [img, setImg] = useState('')
  const fileRef = useRef()
  const getFileInfo = () => {
    const files = fileRef.current.files // 数组
    const file = files[0] // 选取文件
    const reader = new FileReader()
    // reader.readAsArrayBuffer(file) // 按字节读取文件内容，结果用ArrayBuffer对象表示
    // reader.readAsBinaryString(file) // 按字节读取文件内容，结果为文件的二进制串
    reader.readAsDataURL(file) // 读取文件内容，结果用data:url的字符串形式表示 --- base64
    // reader.readAsText(file) // 按字符读取文件内容，结果用字符串形式表示
    reader.onload = function () {
      console.log(this.result)
      setImg(this.result)
      // this.result 保存到数据库
    }
  }
  return (
    <div>
      <input type="file" ref = { fileRef } onChange = { getFileInfo }/>
      <img src={img} alt="" />
    </div>
  );
};

export default App;